<template>
   <div>
      <!-- 添加 -->
      <div>
         角色名称：<el-input size="" class="input-length" v-model="role.name" />
         描述信息：<el-input size="" class="input-length" v-model="role.desc" />
         <el-button type="primary" :icon="Plus" @click="handAdd">添加</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
         <el-table-column prop="name" label="角色名称" width="350" />
         <el-table-column prop="desc" label="说明" width="350" />
         <el-table-column label="操作">
      <!-- 按钮，超级管理员不显示 -->
            <template #default="scope">
               <div v-if="scope.row.id != 1">
                  <el-button size="small" type="primary" @click="handleUpdata(scope.$index, scope.row)">修改</el-button>
                  <el-button size="small" type="primary" @click="handleJurisdiction(scope.$index, scope.row.id)">授权</el-button>
                  <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
               </div>
            </template>
         </el-table-column>
      </el-table>
      <!-- 权限配置 -->
      <el-dialog v-model="centerDialogVisible" title="权限配置" width="30%" align-center>
  <el-tree :data="datas" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" ref="treeRef"
  :default-checked-keys="assignedPermissions" :props="defaultProps">
  <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <a> {{ data.api }} </a>
        </span>
      </template>
  </el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Permissionconfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改弹出框 -->
  <el-dialog v-model="centerDialogVisibles" title="修改信息" width="50%" align-center>
   <div>
         角色名称：<el-input size="" class="input-length" v-model="roles.name" />
         描述信息：<el-input size="" class="input-length" v-model="roles.desc" />
         <el-button type="primary"  @click="handleupdates">修改</el-button>
      </div>
  </el-dialog>
      <!-- 分页 -->
<Pagings v-bind="pagination" @emitfather="CurrentList" ></Pagings>
   </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox} from 'element-plus'
import { get, post } from '@/utlis/http'
import { ref, onMounted,reactive } from 'vue'
import {classPagination} from '#/index'
import type { RoleType, AddroleType } from '../../type/types'
import Pagings from '@/components/paging/Pagings.vue'//分页
const tableData = ref([])
const pagination=reactive(new classPagination())
// 列表请求数据
const form = ref<RoleType>({
   _gp: 'admin.role',
   _mt: 'list',
   page: 1,
   limit: 10
})

// 列表渲染
function rendering() {
   get(form.value).then(res => {
      let { items,total } = res.data
      console.log(res);
      tableData.value = items
      pagination.total=total
   })
}
// 分页
function CurrentList(v:any){
   form.value.page=v.pageNo
   form.value.limit=v.pageSize
   rendering()
}

// 挂载
onMounted(() => {
   rendering()
})

// 添加请求数据
const role = ref<AddroleType>({
   name: '',
   desc: ''
})
// 修改请求数据
const roles = ref<AddroleType>({
   name: '',
   desc: ''
})

// 请求添加
function handAdd() {
   let adds = {
      _gp: 'admin.role',
      _mt: 'create',
      role: JSON.stringify(role.value)//转对象
   }
   if (role.value.name) {//角色名不为空请求接口否则请输入角色名
      post(adds).then(res => {
      let { errmsg,errno } = res
      if (200===errno) {
         console.log(999);
         
         ElMessage.success(errmsg)
         rendering()
         role.value={
            name:'',
            desc:''
         }
      }else{
         console.log(666);
         
         ElMessage.error(errmsg)
      }
   })
   } else {
      ElMessage.warning('请输入角色名称')
   }
}

// 修改
const centerDialogVisibles=ref(false)
function handleUpdata($index:number,row:AddroleType){//修改弹出框
   centerDialogVisibles.value=true
   roles.value={...row}
}
function handleupdates(){//修改请求数据
   let data={
      _gp:'admin.role',
      _mt:'update',
      role:JSON.stringify(roles.value)
   }
   if (roles.value.name!='') {
      post(data).then(res=>{//接口
      let {errmsg,errno}=res
      if (200===errno) {
         centerDialogVisibles.value=false
         rendering()
         ElMessage.success(errmsg)
      } else {
         ElMessage.error(errmsg)
      }
      
   })
   } else {
      ElMessage.error('角色名称不能为空')
   }
}

// 删除
function handleDelete($index:number,roleId :number){
   ElMessageBox.confirm(
    '确定删除吗?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
      let Delete={
         _gp:'admin.role',
         _mt:'delete',
         roleId 
      }
      post(Delete).then(res=>{
         let {errmsg,errno}=res
         console.log(res);
         if (200===errno) {
            rendering()
            ElMessage.success(errmsg)
         }else{
            ElMessage.error(errmsg)
         }
         
      })
    })
}
// 授权
const defaultProps = {//树形配置选项
  children: 'children',
  label: 'label',
}
const datas = ref<TypeSystemPermission>()//渲染权限
const assignedPermissions = ref([])//渲染已选中的权限
let centerDialogVisible=ref(false)//控制窗口显示隐藏
let roleIds=ref()//当前行id
// 渲染权限
function handleJurisdiction($index:number,roleId :number){
   roleIds.value=roleId
   centerDialogVisible.value=true
   let Jurisdiction={//请求渲染权限参数
      _gp:'admin.role',
      _mt:'permissionList',
      roleId
   }
   post(Jurisdiction).then(res=>{//渲染权限接口
      let {errno,data,errmsg}=res
      console.log(res);
      if (200===errno) {
         datas.value=data.systemPermissions
         assignedPermissions.value=data.assignedPermissions
      } else {
         ElMessage.error(errmsg)
      }
   })
}
// 设置权限
const treeRef = ref()
function Permissionconfirm(){
let data={
   _gp:'admin.role',
   _mt:'permissionSet',
   roleSetPermissionDTO:JSON.stringify({
      roleId:roleIds.value,
      permissions:treeRef.value.getCheckedKeys()
   })
}
post(data).then(res=>{
   let {errmsg,errno}=res
   if (200===errno) {
      centerDialogVisible.value=false
      ElMessage.success(errmsg)
   } else {
      ElMessage.error(errmsg)
   }
})
}


</script>
<style scoped>
.input-length {
   width: 200px;
   margin-right: 10px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>